import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:guochaoapp/common/utils/reg_utils.dart';
import 'package:guochaoapp/r.dart';
import 'package:get/get.dart';
import 'package:guochaoapp/controller/login/register_controller.dart';
import './widget/top_view.dart';

class GCRegisterPage extends StatelessWidget {
  final c = Get.put(GCRegisterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xFFF4F8FE),
        appBar: AppBar(
          elevation: Theme.of(context).appBarTheme.elevation,
          backgroundColor: Color(0xFF228189),
          title:
              Text('注册', style: Theme.of(context).appBarTheme.titleTextStyle),
          leading: GestureDetector(
              child: Icon(Icons.arrow_back_ios, color: Color(0xFF333333)),
              onTap: Get.back),
        ),
        body: this._initSubviews());
  }

  _initSubviews() {
    return Scaffold(
        backgroundColor: Color(0xFFF4F8FE),
        body: ListView(children: [
          SizedBox(height: 30),
          topIconView(),
          SizedBox(height: 30),
          _inputView(),
          SizedBox(height: 30),
          _registerButtonView(),
        ]));
  }

  _inputView() {
    int inputColor = 0xFF8EBEC5;
    TextStyle inputStyle = TextStyle(color: Color(inputColor), fontSize: 12);
    UnderlineInputBorder underlineInputBorder =
        UnderlineInputBorder(borderSide: BorderSide(color: Color(inputColor)));

    return Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 25.0),
        child: Column(
          children: [
            Form(
              key: c.registerFormKey,
              child: Column(
                children: [
                  TextFormField(
                      onChanged: (v) => c.phone.value = v,
                      decoration: InputDecoration(
                          hintText: "手机号",
                          hintStyle: inputStyle,
                          focusedBorder: underlineInputBorder,
                          enabledBorder: underlineInputBorder),
                      validator: (v) {
                        return RegUtils.isChinaPhoneLegal(v)
                            ? null
                            : "请输入正确的手机号";
                      }),
                  SizedBox(height: 20),
                  TextFormField(
                    onChanged: (v) => c.randomCode.value = v,
                    decoration: InputDecoration(
                      hintText: "验证码",
                      hintStyle: inputStyle,
                      focusedBorder: underlineInputBorder,
                      enabledBorder: underlineInputBorder,
                      suffixIcon: GestureDetector(
                        child: Padding(
                            padding: const EdgeInsets.symmetric(vertical: 10.0),
                            child: Obx(() => Text(
                                c.countDownTime.value > 0
                                    ? "${c.countDownTime.value}s"
                                    : "获取验证码",
                                style: TextStyle(
                                    fontSize: 14, color: Color(0xFF6D6D6D))))),
                        onTap: c.getRandomCode,
                      ),
                    ),
                    validator: (v) {
                      return v.trim().length != 6 ? "请输入6位验证码" : null;
                    },
                  ),
                  SizedBox(height: 20),
                  TextFormField(
                    onChanged: (v) => c.password.value = v,
                    decoration: InputDecoration(
                      hintText: "密码(6-18位)",
                      hintStyle: inputStyle,
                      focusedBorder: underlineInputBorder,
                      enabledBorder: underlineInputBorder,
                      suffixIcon: IconButton(
                        onPressed: () => c.securePassword.toggle(),
                        icon: Image.asset(
                          R.assetsIconEyes,
                          height: 16,
                          width: 21,
                        ),
                      ),
                    ),
                    obscureText: c.securePassword.value,
                    validator: (v) {
                      if (v.trim().length < 6) {
                        return "密码不能少于6位";
                      } else if (v.trim().length > 32) {
                        return "密码不能长于32位";
                      }
                      return null;
                    },
                  ),
                  SizedBox(height: 20),
                  TextFormField(
                      onChanged: (v) => c.account.value = v,
                      decoration: InputDecoration(
                          hintText: "用户名",
                          hintStyle: inputStyle,
                          focusedBorder: underlineInputBorder,
                          enabledBorder: underlineInputBorder),
                      validator: (v) {
                        return v.trim().length > 0 ? null : "用户名不能为空";
                      }),
                ],
              ),
            ),
          ],
        ));
  }

  _registerButtonView() {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 25.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: RaisedButton(
                    padding: EdgeInsets.all(15.0),
                    child: Text("同意协议并注册", style: TextStyle(fontSize: 15)),
                    color: Color(0xFF228189),
                    textColor: Colors.white,
                    onPressed: c.registerButtonAction,
                  ),
                ),
              ],
            ),
            SizedBox(height: 8),
            Text.rich(TextSpan(children: [
              TextSpan(
                  text: "已阅读并同意以下协议",
                  style: TextStyle(fontSize: 10, color: Color(0xFFB1B2B3))),
              TextSpan(
                  text: "《用户隐私政策》",
                  style: TextStyle(fontSize: 10, color: Colors.blue),
                  recognizer: c.tapGestureRecognizer
                    ..onTap = () {
                      c.jumpToPrivacy();
                    }),
            ]))
          ],
        ));
  }
}
